      
<template>
  <div>
    <!--工具条-->
    <el-col
      :span="24"
      class="toolbar"
      style="
        padding-bottom: 0px;
        padding-bottom: 0px;
        display: flex;
        justify-content: space-between;
      "
    >
      <el-form :inline="true" :model="userListMsg">
        <el-form-item>
          <el-input
            v-model="userListMsg.uid"
            :placeholder="$t('iptdefault.uid')"
          ></el-input>
        </el-form-item>

        <el-select v-model="userListMsg.status" :placeholder="$t('userlist.status')">
          <el-option
            v-for="item in optionsSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-form-item>
          <el-button type="primary" @click="userStatusSelect">{{$t('publicbtn.query')}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="userStatusRefresh">{{$t('publicbtn.refresh')}}</el-button>
        </el-form-item>
      </el-form>

   <el-form :inline="true" style="display:flex;align-item:center;">
        <el-form-item>
          <el-button type="primary" @click="exportexcel">{{$t('publicbtn.exportalldata')}}</el-button>
        </el-form-item> 
         <el-form-item>
          <el-button type="primary" @click="selectexportexcel">{{$t('publicbtn.exportselect')}}</el-button>
        </el-form-item> 
       <excelexport></excelexport>
      </el-form>
    </el-col>

    <!-- 导出全部数据 -->
    <div class="userUpdateMoney" v-show="exportUserlistShow.show">
         <div class="userUpdateForm">
               <h2>{{$t('publicbtn.exportalldata')}}</h2>
                     <el-form ref="exportUserlistShow" label-width="90px" class="demo-ruleForm">
                      
                        <el-form-item :required="true" :label="$t('userlist.Statusinformation')">
                          <el-select v-model="exportUserlistShow.status" :placeholder="$t('userlist.pleaseselectstatusinformation')">
                            <el-option
                              v-for="item in optionsSelect"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item :label="$t('userlist.startpage')">
                            <el-input
                              label-width="90px"
                                :placeholder="$t('iptdefault.startpage')"
                              v-model="exportUserlistShow.start" onkeyup="this.value=this.value.replace(/\D/g,'')"

                              autocomplete="off"
                            ></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('userlist.endpage')">
                        <el-input
                          label-width="90px"
                             :placeholder="$t('iptdefault.endpage')"
                          v-model="exportUserlistShow.end" onkeyup="this.value=this.value.replace(/\D/g,'')"
                    
                          autocomplete="off"
                        ></el-input>
                        </el-form-item>
                        
                        <el-form-item>
                          <el-button type="primary" @click="exportUserlistSubmit"
                            >{{$t('publicbtn.submitbtn')}}</el-button>
                          <el-button @click="exportUserlistReset">{{$t('publicbtn.cancel')}}</el-button>
                        </el-form-item>


                     </el-form>
         </div>
    </div>

        <!-- 选择导出数据 -->
    <div class="userUpdateMoney" v-show="exportUserlistSelectShow.show">
         <div class="userUpdateForm">
               <h2>{{$t('publicbtn.exportselect')}}</h2>

                <div class="iptcheck">
                        <el-form ref="exportUserlistSelectShow" label-width="90px" class="demo-ruleForm">
                          <el-form-item :required="true" :label="$t('userlist.Statusinformation')">
                          <el-select style="width:120px;" v-model="exportUserlistSelectShow.status" :placeholder="$t('userlist.pleaseselectstatusinformation')">
                            <el-option
                              v-for="item in optionsSelect"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item  :label="$t('userlist.startpage')">
                            <el-input
                               style="width:120px;"
                                :placeholder="$t('iptdefault.startpage')"
                              v-model="exportUserlistSelectShow.start" onkeyup="this.value=this.value.replace(/\D/g,'')"
                              autocomplete="off"
                            ></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('userlist.endpage')">
                        <el-input
                           style="width:120px;"
                             :placeholder="$t('iptdefault.endpage')"
                          v-model="exportUserlistSelectShow.end" onkeyup="this.value=this.value.replace(/\D/g,'')"
                          autocomplete="off"
                        ></el-input>
                        </el-form-item>

                         <el-checkbox style="margin-left:86px"
                      @change = 'changeall'
                        v-model="exportall">
                        {{$t('field.exportall')}}
                      </el-checkbox>

                     </el-form>
                     <div class="checkboxSelet">
                     <el-checkbox
                        v-for="(item,index) of selectOption"
                        :key = index
                        v-model="item.checked"
                          @change = changeSelect(item.checked)>
                        
                        {{item.label}}
                      </el-checkbox>
                      </div>

                </div>

              <selectexcelexport
               :selectOption = selectOption
               :selectOptionData = selectOptionData
               :selectOptionName = titleName
               @changeOpetion = changeOpetion
               @changeOpetionClose = changeOpetionClose>
              </selectexcelexport>
         </div>
    </div>
    <!-- 修改用户状态 -->
    <div
      class="userUpdateMoney"
      v-if="upuserStatus"
      :hide-required-asterisk="true"
    >
      <div class="userUpdateForm">
        <h2>{{$t('userlist.modificationstatus')}}</h2>
        <el-form ref="upDateSurplus" label-width="90px" class="demo-ruleForm">
          <el-form-item :label="$t('field.userid')">
            <el-input
              label-width="90px"
              type="id"
              v-model="userStatus.id"
              autocomplete="off"
              readonly
            ></el-input>
          </el-form-item>

          <el-form-item :required="true" :label="$t('userlist.Statusinformation')">
            <el-select v-model="userStatus.status" :placeholder="$t('userlist.pleaseselectstatusinformation')">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

            <!-- <el-form-item :label="$t('userlist.source')">
            <el-input
              label-width="90px"
              type="id"
                 :placeholder="$t('userlist.pleaseinputthesource')"
              v-model="userStatus.source"
              autocomplete="off"
            ></el-input>
          </el-form-item> -->

          <el-form-item>
            <el-button type="primary" @click="getUserStatusSubmit()"
              >{{$t('publicbtn.submitbtn')}}</el-button
            >
            <el-button @click="resetGetUserStatus">{{$t('publicbtn.cancel')}}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 用户详情 -->
    <div
      class="userUpdateMoney"
      v-if="selectUserDetaile"
      :hide-required-asterisk="true"
    >
      <div class="userUpdateForm userdetaile">
       
        <h2>{{$t('userlist.userdetails')}}</h2>
         <div class="userUpdateFormScroll">
         <div class="userdetails">

          <el-tabs v-model="userMessage" @tab-click="handleClick" stretch>
            <el-tab-pane :label="$t('userlist.customerinformation')" name="first">
              <el-form
                ref="form"
                v-if="userMessage == 'first'"
                :model="userDetailsMsg"
                label-width="80px"
                size=""
              >
                <div class="userDetaibox">
                  <div class="userDetailleft">

                    <el-form-item :label="$t('field.userid')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.userId"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('field.username')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.name"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('field.sex')" label-width="130px">
                      <el-select
                        v-model="userDetailsMsg.gender"
                        :placeholder="$t('userlist.pleasechooselastname')"
                        disabled
                      >
                        <el-option :label="$t('field.male')" :value="1"></el-option>
                        <el-option :label="$t('field.female')" :value="0"></el-option>
                      </el-select>
                    </el-form-item>

                      <el-form-item label-width="140px" :label="$t('field.testaccount')" prop="gender">
                      <el-select
                        v-model="userDetailsMsg.test"
                        :placeholder="$t('iptdefault.specialselect')"
                        disabled
                      >
                      <el-option :label="$t('field.yes')" :value="1"></el-option>
                      <el-option :label="$t('field.no')" :value="0"></el-option>
                        </el-select>
                      </el-form-item>


                    <el-form-item :label="$t('userlist.passportidcardnumber')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.idNo"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.dateofbirth')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.birthday"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('field.nationality')"  label-width="130px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.nationality]"
                        readonly
                      ></el-input>
                    </el-form-item>

                     <el-form-item
                      label-width="130px"
                      :label="$t('field.language')"
                      prop="lan">
                      <el-select
                      disabled
                        v-model="userDetailsMsg.lan">
                        <el-option :label="$t('field.notselected')" :value="0"></el-option>
                        <el-option :label="$t('field.english')" :value="3"></el-option>
                        <el-option :label="$t('field.simplifiedchinese')" :value="1"></el-option>
                        <el-option :label="$t('field.chinesetraditional')" :value="2"></el-option>
                      </el-select>
                     </el-form-item>

                    <el-form-item :label="$t('userlist.Mailbox')"  label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.phone"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('field.upusername')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.username"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.address')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.address"
                        readonly
                      ></el-input>
                    </el-form-item>

                     <el-form-item :label="$t('field.country')"  label-width="130px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.country]"
                        readonly
                      ></el-input>
                    </el-form-item>

                     <el-form-item
                        label-width="130px"
                        :label="$t('userlist.Creationtime')"
                        prop="register">
                        <el-input
                          v-model="userDetailsMsg.register"
                        readonly
                        ></el-input>
                     </el-form-item>

                       <el-form-item
                          label-width="130px"
                        :label="$t('userlist.updatetime')"
                          prop="updateAt">
                         <el-input
                      v-model="userDetailsMsg.updateAt"
                      readonly>
                    </el-input>
                  </el-form-item>


                      <el-form-item
                        label-width="130px"
                      :label="$t('userlist.uprecommenderid')"
                        prop="referral"
                      >
                        <el-input
                          v-model="userDetailsMsg.referral"
                          readonly
                        ></el-input>
                     </el-form-item>
                    
                      <el-form-item :label="$t('userlist.occupation')" label-width="130px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.occupation]"
                        readonly
                      ></el-input>
                    </el-form-item>

                      <el-form-item :label="$t('userlist.job')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.job"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.situation')" label-width="130px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.employmentStatus]"
                        readonly
                      ></el-input>
                    </el-form-item>

                  </div>

                  <div class="userDetailcenter">
              
                    <el-form-item :label="$t('userlist.employer')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.company"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.annualincome')" label-width="130px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.annualIncome]"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.totalassets')" label-width="130px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.totalNetWorth]"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.Sourceoffunds')" label-width="130px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.sourceOfFunds] !=null?userListkey_zh[userDetailsMsg.sourceOfFunds]:userDetailsMsg.sourceOfFunds"
                        readonly
                      ></el-input>
                    </el-form-item>

                     <el-form-item :label="$t('userlist.purposeofaccountopening')" label-width="130px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.purpose] != null? userListkey_zh[userDetailsMsg.purpose]:userDetailsMsg.purpose"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.recommenderid')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.referral"
                        readonly
                      ></el-input>
                    </el-form-item>
<!-- 
                    <el-form-item :label="$t('userlist.professionalinvestors')"  label-width="130px">
                <el-select
                  v-model="userDetailsMsg.professionalInvestors"
                disabled>
                  <el-option
                    v-for="item in professionalselect"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                    </el-form-item> -->

                    <el-form-item label="PEP" label-width="130px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.pep]"
                        readonly
                      ></el-input>
                    </el-form-item>

                       <el-form-item :label="$t('userlist.inpublicservice')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.politicallyExposed"
                        readonly
                      ></el-input>
                    </el-form-item>

                        <el-form-item :label="$t('userlist.professionalqualification')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.professionalQualifications"
                        readonly
                      ></el-input>
                    </el-form-item>

                          <el-form-item :label="$t('userlist.customersource')" label-width="130px">
                      <el-input
                        v-model="userDetailsMsg.origin"
                        readonly>
                        </el-input>
                    </el-form-item>

                    <el-form-item  label-width="130px" :label="$t('userlisttab.totalassets')">
                <el-select
                  v-model="userDetailsMsg.totalNetWorth"
                 :placeholder="$t('userlist.upstotalassets')" 
                 disabled>
                  <el-option
                    v-for="item in userListkeySelect_zh['total_net_worth']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

                <el-form-item
                label-width="130px"
                :label="$t('userlist.tsuser')"
                prop="special">
                <el-select
                  v-model="userDetailsMsg.special" disabled>
                  <el-option :label="$t('tradewallet.notselected')" :value='0'></el-option>
                  <el-option :label="$t('userlist.special')" :value='1'></el-option>
                  <el-option :label="$t('userlist.online')" :value='2'></el-option>
                  <el-option :label="$t('userlist.offline')" :value='3'></el-option>
                </el-select>
              </el-form-item>

             <el-form-item
                label-width="130px"
                :label="$t('field.remarks')"
                prop="remark">
                <el-input
                  v-model="userDetailsMsg.remark" readonly
                ></el-input>
              </el-form-item>

              <el-form-item style="text-align:left" :label="$t('userlist.upnologin')"
                label-width="140px">
                <el-checkbox v-model="userDetailsMsg.locking" disabled></el-checkbox>
              </el-form-item>

              <el-form-item style="text-align:left" :label="$t('userlist.upborecharging')"
                label-width="140px">
                <el-checkbox v-model="userDetailsMsg.rechargeAble" disabled></el-checkbox>
              </el-form-item>

              <el-form-item style="text-align:left" :label="$t('userlist.upnowithdrawal')"
                label-width="140px">
                <el-checkbox v-model="userDetailsMsg.withdrawAble" disabled></el-checkbox>
              </el-form-item>
            </div>

            <div class="userDetailright">

            <el-form-item label-width="190px"  :label="$t('userlisttab.annualincome')">
                <el-select
                  v-model="userDetailsMsg.annualIncome"
                  disabled>
                  <el-option
                    v-for="item in userListkeySelect_zh['gross_annual_income']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              
              <el-form-item
                label-width="190px"
                :label="$t('userlist.someoneelsecontrolsyouraccount')"
                prop="controlAccount">
                <el-select
                  v-model="userDetailsMsg.controlAccount"
                  :placeholder="$t('userlist.someoneelsecontrolsyouraccount')" disabled>
                  <el-option :label="$t('field.yes')" value="1"></el-option>
                  <el-option :label="$t('field.no')" value="0"></el-option>
                </el-select>
              </el-form-item>

                    <el-form-item :label="$t('field.language')" label-width="190px">
                      <el-select v-model="userDetailsMsg.lan" disabled>
                        <el-option :label="$t('field.notselected')" :value="0"></el-option>
                        <el-option :label="$t('field.simplifiedchinese')" :value="1"></el-option>
                        <el-option :label="$t('field.chinesetraditional')" :value="2"></el-option>
                        <el-option :label="$t('field.english')" :value="3"></el-option>
                      </el-select>
                    </el-form-item>

                      <el-form-item
                          label-width="190px"
                        :label="$t('userlist.uptolerance')">
                      <el-select
                        v-model="userDetailsMsg.tolerance"
                        disabled>
                        <el-option
                          v-for="item in userListkeySelect_zh['tolerance']"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                      </el-form-item>

                            
                    <el-form-item
                      label-width="190px"
                      :label="$t('userlist.uptreatment')">
                      <el-select
                        v-model="userDetailsMsg.fluctuation"
                        disabled>
                        <el-option
                          v-for="item in userListkeySelect_zh['fluctuation']"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>


                     <el-form-item
                    label-width="190px"
                    :label="$t('userlist.upinvestmentgoalofcryptocurrency')" >
                    <el-select
                      v-model="userDetailsMsg.bestDescribes"
                disabled>
                      <el-option
                        v-for="item in userListkeySelect_zh['best_describes']"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label-width="190px"
                :label="$t('userlist.upinvestmenttime')">
                <el-select
                  v-model="userDetailsMsg.averageInvestment"
                  disabled >
                  <el-option
                    v-for="item in userListkeySelect_zh['average_investment']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label-width="190px"
                :label="$t('userlist.upafteroneyear')"
              >
                <el-select
                  v-model="userDetailsMsg.expectOfYear"
                  disabled
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['expect_of_year']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label-width="190px"
                :label="$t('userlist.updidyouhearaboutus')">
                <el-select
                  v-model="userDetailsMsg.hearAboutUs"
                  disabled >
                  <el-option
                    v-for="item in userListkeySelect_zh['hear_about_us']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>


                    <el-form-item
                     :label="$t('userlist.percentageoftotalassets')"
                      label-width="190px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.percentage]"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.experienceofinvestingincryptocurrency')" label-width="190px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.yearsExperience]"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.thecognitionofcryptocurrency')" label-width="190px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.knowledgeCrypto]"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.investmentgoalofcryptocurrency')" label-width="190px">
                      <el-input
                        v-model="userListkey_zh[userDetailsMsg.bestDescribes]!=null?userListkey_zh[userDetailsMsg.bestDescribes]:userDetailsMsg.bestDescribes"
                        readonly
                      ></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('userlist.capitaldeclaration')" label-width="190px">
                      <el-input
                        v-model="userDetailsMsg.capitalDeclaration"
                        readonly
                       
                      ></el-input>
                    </el-form-item>

              <el-form-item style="text-align:left" :label="$t('userlist.upnoexchange')"
                label-width="190px">
                <el-checkbox v-model="userDetailsMsg.exchangeAble" disabled></el-checkbox>
              </el-form-item>

                  <el-form-item style="text-align:left" :label="$t('userlist.upincludingintroversion')"
                label-width="190px">
                <el-checkbox v-model="userDetailsMsg.withdrawInnerAble" disabled></el-checkbox>
              </el-form-item>
                    
                  </div>
                </div>
              </el-form>
            </el-tab-pane>

            <el-tab-pane class="table-box" :label="$t('userlist.wallet')" name="second">
              <el-table
                v-if="userMessage == 'second'"
                :data="userListPackage"
                v-loading="listPackLoading"
                style="width: 100%"
                height="650"
              >
                <el-table-column
                  prop="userId"
                  :label="$t('field.userid')"
                  width="190"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="crypto"
                  :label="$t('userlist.digitalcurrency')"
                  width="190"
                  align="center"
                >
                </el-table-column>

                <el-table-column prop="amount" :label="$t('userlist.balance')" align="center">
                  <template slot-scope="props">
                    {{ (props.row.amount / million).toFixed(8)}}
                  </template>
                </el-table-column>

                <el-table-column
                  prop="lockAmount"
                 :label="$t('userlist.lockAmount')"
                  align="center"
                >
                  <template slot-scope="props">
                    {{ (props.row.lockAmount / million).toFixed(8)}}
                  </template>
                </el-table-column>

                <el-table-column
                  prop="depositAddress"
                  :label="$t('userlist.depositAddress')"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <el-tab-pane class="table-box" :label="$t('userlist.walletOTC')" name="secondOtc">
              <el-table
                v-if="userMessage == 'secondOtc'"
                :data="userListPackageOtc"
                v-loading="listPackLoading"
                style="width: 100%"
                height="650"
              >
                <el-table-column
                  prop="userId"
                  :label="$t('field.userid')"
                  width="190"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="crypto"
              :label="$t('userlist.digitalcurrency')"
                  width="190"
                  align="center"
                >
                </el-table-column>

              
                <el-table-column prop="amount" :label="$t('userlist.balance')" align="center">
                  <template slot-scope="props">
                    {{ (props.row.amount / million).toFixed(8) }}
                  </template>
                </el-table-column>

                <el-table-column
                  prop="lockAmount"
                 :label="$t('userlist.lockAmount')" 
                  align="center"
                >
                  <template slot-scope="props">
                    {{ (props.row.lockAmount / million).toFixed(8) }}
                  </template>
                </el-table-column>

                <el-table-column
                  prop="depositAddress"
                 :label="$t('userlist.depositAddress')" 
                  align="center"
                >
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <el-tab-pane :label="$t('userlist.pledge')" name="third">
              <el-form
                ref="form"
                v-if="userMessage == 'third'"
                :model="userDetailsMsg"
                label-width="80px"
                size=""
              >
                <el-form-item label="活动名称3">
                  <el-input v-model="userDetailsMsg.name"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <el-tab-pane :label="$t('userlist.fill')" name="fourth" >
              <el-form
                ref="form"
                v-if="userMessage == 'fourth'"
                :model="userDetailsMsg"
                label-width="80px"
                size=""
              >
                <div class="userDetaibox" style="text-align: center">
                  <div style="padding: 0 100px; width: 33.33%">

                    <div class="demo-image">
                      <div class="block">
                        <h2 class="demonstration">{{$t('userlist.passportIDcardfront')}}</h2>
                        <el-image
                          v-if="userDetailsMsg.picIdCardFront"
                          style="width: 200px; height: 200px"
                          :src="userDetailsMsg.picIdCardFront"
                          :preview-src-list="srcList1"
                        >
                        </el-image>
                        <p v-else>{{$t('userlist.nophotos')}}</p>
                        <el-row v-if="userDetailsMsg.picIdCardFront">
                          <a :href="userDetailsMsg.picIdCardFront" :download="userDetailsMsg.picIdCardFront" target="_blank" title="下载"  v-if="diction =='Counter'?false:diction =='Dealing'?false:true">
                            <el-button type="primary" icon="el-icon-share">{{$t('userlist.download')}}

                            </el-button>
                          </a>

                         </el-row>
                      </div>
                    </div>

                    <div class="demo-image">
                      <div class="block">
                        <h2 class="demonstration">{{$t('userlist.passportIDcardreverse')}}</h2>
                        <el-image
                          v-if="userDetailsMsg.picIdCardBack"
                          style="width: 200px; height: 200px"
                          :src="userDetailsMsg.picIdCardBack"
                          :preview-src-list="srcList2"
                          >
                        </el-image>
                        <p v-else>{{$t('userlist.nophotos')}}</p>
                        <el-row v-if="userDetailsMsg.picIdCardBack">
                          <a :href="userDetailsMsg.picIdCardBack" :download="userDetailsMsg.picIdCardBack" target="_blank"  title="下载" v-if="diction =='Counter'?false:diction =='Dealing'?false:true"
                            ><el-button type="primary" icon="el-icon-share" 
                              >{{$t('userlist.download')}}</el-button
                            ></a >
                        </el-row>
                      </div>
                    </div>
                  </div>

                  <div style="padding: 0 100px; width: 33.33%">
                    <div class="demo-image">
                      <div class="block">
                        <h2 class="demonstration">{{$t('userlist.Proofofaddress')}}</h2>
                        <el-image
                          v-if="userDetailsMsg.picAddress"
                          style="width: 200px; height: 200px"
                          :src="userDetailsMsg.picAddress"
                          :preview-src-list="srcList3"

                        ></el-image>
                        <p v-else>{{$t('userlist.nophotos')}}</p>
                        <el-row v-if="userDetailsMsg.picAddress">
                          <a :href="userDetailsMsg.picAddress" :download="userDetailsMsg.picAddress" target="_blank" title="下载" v-if="diction =='Counter'?false:diction =='Dealing'?false:true"
                            ><el-button type="primary" icon="el-icon-share" 
                              >{{$t('userlist.download')}}</el-button
                            ></a>
                        </el-row>
                      </div>
                    </div>

                    <div class="demo-image">
                      <div class="block">
                        <h2 class="demonstration">{{$t('userlist.handwrittendocuments')}}</h2>
                        <el-image
                          v-if="userDetailsMsg.holdPic"
                          style="width: 200px; height: 200px"
                          :src="userDetailsMsg.holdPic"
                          :preview-src-list="srcList4"

                        ></el-image>
                        <p v-else>{{$t('userlist.nophotos')}}</p>

                        <el-row v-if="userDetailsMsg.holdPic">
                          <a :href="userDetailsMsg.holdPic" :download="userDetailsMsg.holdPic" target="_blank"  title="下载"  v-if="diction =='Counter'?false:diction =='Dealing'?false:true"
                            ><el-button type="primary" icon="el-icon-share" 
                              >{{$t('userlist.download')}}</el-button
                            ></a>
                        </el-row>
                      </div>
                    </div>
                  </div>

                  <div style="padding: 0 100px; width: 33.33%">
                    <div class="demo-image">
                      <div class="block">
                        <h2 class="demonstration">{{$t('userlist.Card')}}</h2>
                        <el-image
                          v-if="userDetailsMsg.picCard"
                          style="width: 200px; height: 200px"
                          :src="userDetailsMsg.picCard"
                          :preview-src-list="srcList5"

                        ></el-image>
                        <p v-else>{{$t('userlist.nophotos')}}</p>
                        <el-row v-if="userDetailsMsg.picCard">
                          <a :href="userDetailsMsg.picCard" :download="userDetailsMsg.picCard" target="_blank" title="下载" v-if="diction =='Counter'?false:diction =='Dealing'?false:true"
                            >
                        
                            <el-button type="primary" icon="el-icon-share"
                              >{{$t('userlist.download')}}</el-button
                            ></a
                          >
                        </el-row>
                      </div>
                    </div>
                  </div>

                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
          
     
     <el-button type="primary" @click="userDetailClose">{{$t('publicbtn.determine')}}</el-button>


        </div>

        </div>
      </div>
    </div>

    <!-- 修改用户全部信息 :rules="rules"-->
    <div class="userUpdateMoney" v-if="userUpDateMessage">
      <div class="userUpdateForm userUpdateFormall">
        <h2>{{$t('userlist.Modifyuserinformation')}}</h2>
        <div style="height: 80vh;
            width:90vw;
            overflow-y: auto;
            overflow-x: auto;">
        <el-form
         
          :model="userUpDateMessageall"
          ref="userUpDateMessagefrom"
          label-width="100px"
          class="demo-updateForm">
          <div style="display: flex ">
            <div class="updateLeft">
              <el-form-item label-width="140px" :label="$t('field.userid')" prop="userId">
                <el-input
                  v-model="userUpDateMessageall.userId"
                  :placeholder="$t('field.userid')"
                  readonly
                ></el-input>
              </el-form-item>

              <el-form-item label-width="140px" :label="$t('field.username')" prop="name">
                <el-input
                  v-model="userUpDateMessageall.name"
                  :placeholder="$t('userlist.upyourname')"
                ></el-input>
              </el-form-item>

              <el-form-item label-width="140px" :label="$t('field.sex')" prop="gender">
                <el-select
                  v-model="userUpDateMessageall.gender"
                  :placeholder="$t('userlist.uppleasechooselastname')"
                >
                  <el-option :label="$t('field.male')" :value="1"></el-option>
                  <el-option :label="$t('field.female')" :value="0"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label-width="140px" :label="$t('field.testaccount')" prop="gender">
                <el-select
                  v-model="userUpDateMessageall.test"
                  :placeholder="$t('iptdefault.specialselect')"
                >
                  <el-option :label="$t('field.yes')" :value="1"></el-option>
                  <el-option :label="$t('field.no')" :value="0"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label-width="140px" :label="$t('userlist.upNumber')" prop="idNo">
                <el-input
                  v-model="userUpDateMessageall.idNo"
                  :placeholder="$t('userlist.upinputidnumber')"
                ></el-input>
              </el-form-item>

              <el-form-item label-width="140px" :label="$t('userlist.upMailbox')" prop="phone">
                <el-input
                  v-model="userUpDateMessageall.phone"
                  :placeholder="$t('userlist.upinputemail')"
                ></el-input>
              </el-form-item>

              <el-form-item label-width="140px" :label="$t('userlist.upaddress')" prop="address">
                <el-input
                  v-model="userUpDateMessageall.address"
                  :placeholder="$t('userlist.upentertheaddress')"
                ></el-input>
              </el-form-item>

              <el-form-item label-width="140px" :label="$t('userlist.upbirthday')" prop="birthday">
                <el-input
                  v-model="userUpDateMessageall.birthday"
                  :placeholder="$t('userlist.enteryourbirthday')"
                ></el-input>
              </el-form-item>

              <el-form-item
                label-width="140px"
                :label="$t('userlist.upemployer')"
                prop="company"
              >
                <el-input
                  v-model="userUpDateMessageall.company"
                  :placeholder="$t('userlist.upcompany')"
                ></el-input>
              </el-form-item>

              <el-form-item
                label-width="140px"
                :label="$t('userlist.upsomeoneelsecontrolsyouraccount')"
                prop="controlAccount"
              >
                <el-select
                  v-model="userUpDateMessageall.controlAccount"
                  :placeholder="$t('userlist.upsomeoneelsecontrolsyouraccount')"
                >
                  <el-option :label="$t('field.yes')" value="1"></el-option>
                  <el-option :label="$t('field.no')" value="0"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label-width="140px"
                :label="$t('userlist.Creationtime')"
                prop="register">
                <el-input
                  v-model="userUpDateMessageall.register"
                  readonly
                  :placeholder="$t('userlist.enterthecreationtime')"
                ></el-input>
              </el-form-item>

                <el-form-item
                label-width="140px"
               :label="$t('userlist.uprecommenderid')"
                prop="referral">
                <el-input
                  v-model="userUpDateMessageall.referral"
                  :placeholder="$t('userlist.upenterrecommenderid')"
                ></el-input>
              </el-form-item>

              <el-form-item :label="$t('userlist.upnologin')"
                label-width="140px">
                <el-checkbox v-model="userUpDateMessageall.locking"></el-checkbox>
              </el-form-item>

                     <el-form-item :label="$t('userlist.upborecharging')"
                label-width="140px">
                <el-checkbox v-model="userUpDateMessageall.rechargeAble"></el-checkbox>
              </el-form-item>

                     <el-form-item :label="$t('userlist.upnowithdrawal')"
                label-width="140px">
                <el-checkbox v-model="userUpDateMessageall.withdrawAble"></el-checkbox>
              </el-form-item>
             
              </div>

            <div class="updateCenter1">

                  <el-form-item
                label-width="120px"
                    :label="$t('userlist.upcapitaldeclaration')"
                prop="capitalDeclaration"
              >
                <el-input
                  v-model="userUpDateMessageall.capitalDeclaration"
                  :placeholder="$t('userlist.upfunddeclaration')"
                ></el-input>
              </el-form-item>

              <el-form-item
                label-width="120px"
                :label="$t('userlist.qualifications')"
                prop="professionalQualifications">
                <el-input
                  v-model="userUpDateMessageall.professionalQualifications"
                  :placeholder="$t('userlist.upprofessionalqualification')"
                ></el-input>
              </el-form-item>


           <el-form-item
                label-width="120px"
                 :label="$t('userlist.uppurposeofaccountopening')"
                prop="purpose">
                <el-select
                  v-model="userUpDateMessageall.purpose"
                  :placeholder="$t('userlist.upopeningpurpose')">
                  <el-option
                    v-for="item in userListkeySelect_zh['purpose']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>



              <el-form-item
                label-width="120px"
               :label="$t('userlist.updatetime')"
                prop="updateAt"
              >
                <el-input
                  v-model="userUpDateMessageall.updateAt"
                  :placeholder="$t('userlist.upentertheupdatetime')"
                ></el-input>
              </el-form-item>

              <el-form-item label-width="120px" :label="$t('field.upusername')" prop="username">
                <el-input
                  v-model="userUpDateMessageall.username"
                  :placeholder="$t('publicbtn.upsusername')"
                ></el-input>
              </el-form-item>

              <el-form-item
              prop="sourceOfFunds"
                label-width="120px"
              :label="$t('userlist.upSourceoffunds')" 
              >
                <el-select
                  v-model="userUpDateMessageall.sourceOfFunds"
                  :placeholder="$t('userlist.upsSourceoffunds')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['source_of_funds']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                prop="tolerance"
                label-width="120px"
                :label="$t('userlist.uptolerance')"
              >
                <el-select
                  v-model="userUpDateMessageall.tolerance"
                  :placeholder="$t('userlist.upstolerance')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['tolerance']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                prop="fluctuation"
                label-width="120px"
                :label="$t('userlist.uptreatment')"
              >
                <el-select
                  v-model="userUpDateMessageall.fluctuation"
                  :placeholder="$t('userlist.upstreatment')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['fluctuation']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="totalNetWorth" label-width="120px" :label="$t('userlisttab.totalassets')">
                <el-select
                  v-model="userUpDateMessageall.totalNetWorth"
                 :placeholder="$t('userlist.upstotalassets')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['total_net_worth']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item  prop="annualIncome"  label-width="120px"  :label="$t('userlisttab.annualincome')">
                <el-select
                  v-model="userUpDateMessageall.annualIncome"
                  :placeholder="$t('userlist.upsannualincome')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['gross_annual_income']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="country" label-width="120px" :label="$t('field.country')">
                <el-select
                  v-model="userUpDateMessageall.country"
                  :placeholder="$t('userlist.upscountry')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['country']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                prop="employmentStatus"
                label-width="120px"
                :label="$t('userlist.upituation')"
              >
                <el-select
                  v-model="userUpDateMessageall.employmentStatus"
                  :placeholder="$t('userlist.upsituation')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['employment_status']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

                  <el-form-item :label="$t('userlist.upnoexchange')"
                label-width="120px">
                <el-checkbox v-model="userUpDateMessageall.exchangeAble"></el-checkbox>
              </el-form-item>

                  <el-form-item :label="$t('userlist.upincludingintroversion')"
                label-width="120px">
                <el-checkbox v-model="userUpDateMessageall.withdrawInnerAble"></el-checkbox>
              </el-form-item>
              
            </div>

            <div class="updateCenter2">
              <el-form-item
                 prop="bestDescribes"
                label-width="140px"
                :label="$t('userlist.upinvestmentgoalofcryptocurrency')"
              >
                <el-select
                  v-model="userUpDateMessageall.bestDescribes"
                  :placeholder="$t('userlist.upsinvestmentgoalofcryptocurrency')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['best_describes']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
               prop="averageInvestment"
                label-width="140px"
                :label="$t('userlist.upinvestmenttime')"
              >
                <el-select
                  v-model="userUpDateMessageall.averageInvestment"
                :placeholder="$t('userlist.upsinvestmenttime')" >
                  <el-option
                    v-for="item in userListkeySelect_zh['average_investment']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                prop="expectOfYear"
                label-width="140px"
                :label="$t('userlist.upafteroneyear')"
              >
                <el-select
                  v-model="userUpDateMessageall.expectOfYear"
                  :placeholder="$t('userlist.upsafteroneyear')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['expect_of_year']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                 prop="hearAboutUs"
                label-width="140px"
                :label="$t('userlist.updidyouhearaboutus')"
              >
                <el-select
                  v-model="userUpDateMessageall.hearAboutUs"
              :placeholder="$t('userlist.upsdidyouhearaboutus')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['hear_about_us']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                prop="knowledgeCrypto"
                label-width="140px"
                :label="$t('userlist.upthecognitionofcryptocurrency')"
              >
                <el-select
                  v-model="userUpDateMessageall.knowledgeCrypto"
                 :placeholder="$t('userlist.upsthecognitionofcryptocurrency')">
                  <el-option
                    v-for="item in userListkeySelect_zh['knowledge_crypto']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                 prop="yearsExperience"
                label-width="140px"
                :label="$t('userlist.upexperienceofinvestingincryptocurrency')"
              >
                <el-select
                  v-model="userUpDateMessageall.yearsExperience"
                 :placeholder="$t('userlist.upsexperienceofinvestingincryptocurrency')">
                  <el-option
                    v-for="item in userListkeySelect_zh['years_experience']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
               prop="percentage"
                label-width="140px"
                :label="$t('userlist.upoftotalassets')"
              >
                <el-select
                  v-model="userUpDateMessageall.percentage"
                  :placeholder="$t('userlist.upsoftotalassets')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['percentage']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label-width="140px"
                :label="$t('field.language')"
                prop="lan">
                <el-select
                  v-model="userUpDateMessageall.lan"
                  :placeholder="$t('field.language')"
                >
                  <el-option :label="$t('field.notselected')" :value="0"></el-option>
                  <el-option :label="$t('field.english')" :value="3"></el-option>
                  <el-option :label="$t('field.simplifiedchinese')" :value="1"></el-option>
                  <el-option :label="$t('field.chinesetraditional')" :value="2"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item  prop="nationality" label-width="140px" label="国籍">
                <el-select
                  v-model="userUpDateMessageall.nationality"
                  :placeholder="$t('userlist.upsnationality')" 
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['nationality']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="occupation"  label-width="140px" :label="$t('userlist.upoccupation')" >
                <el-select
                  v-model="userUpDateMessageall.occupation"
                  :placeholder="$t('userlist.upsoccupation')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['occupation']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

               <el-form-item :label="$t('userlist.job')" label-width="140px">
                      <el-input
                        v-model="userDetailsMsg.job"
                      ></el-input>
                </el-form-item>

              <el-form-item prop="pep"  label-width="140px" label="pep">
                <el-select
                  v-model="userUpDateMessageall.pep"
                   :placeholder="$t('userlist.uppep')"
                >
                  <el-option
                    v-for="item in userListkeySelect_zh['pep']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

                  <el-form-item
                label-width="140px"
                :label="$t('userlist.upinpublicservice')"
                prop="politicallyExposed"
              >
                <el-input
                  v-model="userUpDateMessageall.politicallyExposed"
                :placeholder="$t('userlist.upsinpublicservice')"
                ></el-input>
              </el-form-item>

                 <el-form-item
                label-width="140px"
                :label="$t('userlist.upcustomersource')"
                prop="origin"
              >
                <el-input
                  v-model="userUpDateMessageall.origin"
                :placeholder="$t('userlist.iptcustomersource')"
                ></el-input>
              </el-form-item>

                <el-form-item
                label-width="140px"
                :label="$t('userlist.tsuser')"
                prop="special">
                <el-select
                  v-model="userUpDateMessageall.special"
                  :placeholder="$t('iptdefault.specialuser')">
                   <el-option :label="$t('tradewallet.notselected')" :value='0'></el-option>
                  <el-option :label="$t('userlist.special')" :value='1'></el-option>
                  <el-option :label="$t('userlist.online')" :value='2'></el-option>
                  <el-option :label="$t('userlist.offline')" :value='3'></el-option>
                </el-select>
              </el-form-item>

            <el-form-item
                label-width="140px"
                :label="$t('field.remarks')"
                prop="remark"
              >
                <el-input
                  v-model="userUpDateMessageall.remark"
                :placeholder="$t('field.comments')"
                ></el-input>
              </el-form-item>
            </div>

            <div class="updateRight">
              <div class="updateRightTop">
                <div class="demo-image__preview">
                  <h3 class="demonstration">{{$t('userlist.upcertificate')}}</h3>
                  <el-image prop='img'
                    v-if="userUpDateMessageall.picIdCardFront"
                    style="width: 200px; height: 200px"
                    :src="userUpDateMessageall.picIdCardFront"
                  >
                  </el-image>
                  <p v-else>{{$t('userlist.upnophotos')}}</p>
                  <el-button
                    type="primary"
                    style="position: relative; overflow: hidden"
                    >{{$t('userlist.upload')}}<i class="el-icon-upload el-icon--right"></i>
                    <input
                      type="file"
                      style="
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 50px;
                        opacity: 0;
                      "
                      @change="tirggerFile($event, 'picIdCardFront')"
                      accept="image/*"
                    />
                  </el-button>
                </div>

                <div class="demo-image__preview">
                  <h3 class="demonstration">{{$t('userlist.upreverse')}}</h3>
                  <el-image
                    v-if="userUpDateMessageall.picIdCardBack"
                    style="width: 200px; height: 200px"
                    :src="userUpDateMessageall.picIdCardBack"
                  >
                  </el-image>
                  <p v-else>{{$t('userlist.upnophotos')}}</p>
                  <el-button
                    type="primary"
                    style="position: relative; overflow: hidden"
                    >{{$t('userlist.upload')}}<i class="el-icon-upload el-icon--right"></i>
                    <input
                      type="file"
                      style="
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 50px;
                        opacity: 0;
                      "
                      @change="tirggerFile($event, 'picIdCardBack')"
                      accept="image/*"
                    />
                  </el-button>
                </div>
              </div>

              <div class="updateRightBottom">
                <div class="demo-image__preview">
                  <h3 class="demonstration">{{$t('userlist.upidphoto')}}</h3>
                  <el-image
                    v-if="userUpDateMessageall.holdPic"
                    style="width: 200px; height: 200px"
                    :src="userUpDateMessageall.holdPic"
                  >
                  </el-image>
                  <p v-else>{{$t('userlist.upnophotos')}}</p>
                  <el-button
                    type="primary"
                    style="position: relative; overflow: hidden"
                    >{{$t('userlist.upload')}}<i class="el-icon-upload el-icon--right"></i>
                    <input
                      type="file"
                      style="
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 50px;
                        opacity: 0;
                      "
                      @change="tirggerFile($event, 'holdPic')"
                      accept="image/*"
                    />
                  </el-button>
                </div>

                <div class="demo-image__preview">
                  <h3 class="demonstration">{{$t('userlist.upofaddress')}}</h3>
                  <el-image
                    v-if="userUpDateMessageall.picAddress"
                    style="width: 200px; height: 200px"
                    :src="userUpDateMessageall.picAddress"
                  >
                  </el-image>
                  <p v-else>{{$t('userlist.upnophotos')}}</p>
                  <el-button
                    type="primary"
                    style="position: relative; overflow: hidden"
                    >{{$t('userlist.upload')}}<i class="el-icon-upload el-icon--right"></i>
                    <input
                      type="file"
                      style="
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 50px;
                        opacity: 0;
                      "
                      @change="tirggerFile($event, 'picAddress')"
                      accept="image/*"
                    />
                  </el-button>
                </div>
              </div>
            </div>

            <div class="updateRightpicCard">
              <div class="updateRightBottom">
                <div class="demo-image__preview">
                  <h3 class="demonstration">{{$t('userlist.upCard')}}</h3>
                  <el-image
                    v-if="userUpDateMessageall.picCard"
                    style="width: 200px; height: 200px"
                    :src="userUpDateMessageall.picCard"
                  >
                  </el-image>
                  <p v-else>{{$t('userlist.upnophotos')}}</p>
                  <el-button
                    type="primary"
                    style="position: relative; overflow: hidden"
                    >{{$t('userlist.upload')}}<i class="el-icon-upload el-icon--right"></i>
                    <input
                      type="file"
                      style="
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 50px;
                        opacity: 0;
                      "
                      @change="tirggerFile($event, 'picCard')"
                      accept="image/*"
                    />
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <el-form-item style="text-align: center">
            <el-button type="primary" @click="userUpDateMessageSubmit"
              >{{$t('publicbtn.updatenow')}}</el-button
            >
            <el-button @click="userUpDateMessageReset">{{$t('publicbtn.cancel')}}</el-button>
          </el-form-item>
        </el-form>
     </div>
      </div>
    </div>

    <!-- 修改用户资源申报 -->
    <div class="userUpdateMoney" v-if="userUpResource">
      <div class="userUpdateForm">
        <h2>{{$t('userlist.declaration')}}</h2>
        <el-form ref="upDateSurplus" label-width="90px" class="demo-ruleForm">
          <el-form-item label="ID">
            <el-input
              label-width="90px"
         
              v-model="userUpResourceData.id"
              autocomplete="off"
              readonly
            ></el-input>
          </el-form-item>

          <el-form-item :label="$t('userlist.declaration')">
            <el-input
              label-width="90px"
                :placeholder="$t('userlist.updeclaration')"
              v-model="userUpResourceData.cd"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="userResourceSubmit()"
              >{{$t('publicbtn.submitbtn')}}</el-button>
            <el-button @click="userResourceReset">{{$t('publicbtn.cancel')}}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="userList"
      style="width: 100%"
      id="out-table"
    >

   <el-table-column fixed="left" prop="special"
       :label="$t('userlist.tsuser')" width="100">
        <template slot-scope="props">
         {{
            props.row.special==0?$t("tradewallet.notselected"):
            props.row.special==1?$t("userlist.special"):
            props.row.special==2?$t("userlist.online"):
            props.row.special==3?$t("userlist.offline"):''
          }}
        </template>
      </el-table-column>

      <el-table-column fixed="left" prop="userId" :label="$t('field.userid')" width="100">
      </el-table-column>

      <el-table-column fixed="left" prop="username" :label="$t('field.upusername')" width="100">
      </el-table-column>

      <el-table-column fixed="left" prop="test" :label="$t('field.testaccount')" width="110">
           <template slot-scope="props">
          {{
             props.row.test == 1?$t('field.yes'):props.row.test == 0?$t('field.no'):''
          }}
        </template>
      </el-table-column>

      <el-table-column fixed="left" :label="$t('field.username')" width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.name] == null
              ? props.row.name
              : userListkey_zh[props.row.name]
          }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('field.sex')"  width="100">
        <template slot-scope="props">
          {{ props.row.gender == 1 ? $t('field.male'):$t('field.female') }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('field.nationality')" width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.nationality] == null
              ? props.row.nationality
              : userListkey_zh[props.row.nationality]
          }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('userlisttab.occupation')"  width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.occupation] == null
              ? props.row.occupation
              : userListkey_zh[props.row.occupation]
          }}
        </template>
      </el-table-column>

      
  <el-table-column  prop="job" :label="$t('userlist.job')" width="100">
      </el-table-column>

      <el-table-column :label="$t('userlisttab.Mailbox')" width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.phone] == null
              ? props.row.phone
              : userListkey_zh[props.row.phone]
          }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('field.language')" width="100">
     
     

        <template slot-scope="props">
          {{
            props.row.lan == 0
              ? $t('field.notselected')
              : props.row.lan == 1
              ? $t('field.simplifiedchinese')
              : props.row.lan == 2
              ? $t('field.chinesetraditional')
              : props.row.lan == 3
              ? $t('field.english')
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('userlisttab.annualincome')" width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.annualIncome] == null
              ? props.row.annualIncome
              : userListkey_zh[props.row.annualIncome]
          }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('userlisttab.openingdate')" width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.register] == null
              ? props.row.register
              : userListkey_zh[props.row.register]
          }}
        </template>
      </el-table-column>

        <el-table-column prop="updateAt"  :label="$t('field.upeationtime')" width="100">
      </el-table-column>

      <el-table-column :label="$t('userlisttab.qualifications')" width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.professionalQualifications] == null
              ? props.row.professionalQualifications
              : userListkey_zh[props.row.professionalQualifications]
          }}
        </template>
      </el-table-column>

      <el-table-column prop="sourceOfFunds"  :label="$t('userlisttab.Sourceoffunds')" width="100">
   
      </el-table-column>

      <el-table-column :label="$t('userlisttab.auditstatus')" width="100">
        <template slot-scope="props">
          {{
            props.row.status == 0
              ? $t('userlisttab.tionsUnderreview')
              : props.row.status == 1
              ? $t('userlisttab.tionsoptions')
              : props.row.status == -1
              ? $t('userlisttab.tionsauditfailed')
              : props.row.status == -2
              ?$t('userlisttab.tionsnotsubmittedyet')
              : props.row.status == 4
              ? $t('userlist.Cancelopening')
              : ''
          }}
        </template>
      </el-table-column>
 
      <el-table-column :label="$t('userlisttab.openingprogress')" width="100">
 
        <template slot-scope="props">
         {{$t('userlisttab.third')+ props.row.step+ $t('userlisttab.step')}}
        </template>
    

      </el-table-column>

      <el-table-column :label="$t('userlisttab.totalassets')" width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.totalNetWorth] == null
              ? props.row.totalNetWorth
              : userListkey_zh[props.row.totalNetWorth]
          }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('userlisttab.email')" width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.username] == null
              ? props.row.username
              : userListkey_zh[props.row.username]
          }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('userlisttab.experience')" width="110">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.yearsExperience] == null
              ? props.row.yearsExperience
              : userListkey_zh[props.row.yearsExperience]
          }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('userlisttab.source')" width="100">
        <template slot-scope="props">
          {{
            userListkey_zh[props.row.origin] == null
              ? props.row.origin
              : userListkey_zh[props.row.origin]
          }}
        </template>
      </el-table-column>
<!-- v-if="diction =='Counter'?false:true" -->
      <el-table-column :label="$t('field.operation')" width="150" fixed="right" >
        <template slot-scope="props">
<el-dropdown>
  <el-button type="primary">
    {{$t('field.moremenus')}}
   <i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
                <el-button
                size="mini" v-if="diction =='CS_V2'?false:diction =='Counter'?false:true"
                @click="updataUserStatus(props.row.id, props.row.status)">
                {{$t('publicbtn.updatestatus')}}
              </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
              <el-button v-if="diction =='Counter'?false:true"
              size="mini"
              type="primary"
              @click="userUpDateMsg(props.row)"
            >{{$t('publicbtn.modifyinformation')}}
            </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
                <el-button size="mini" type="primary" @click="userDetails(props.row)">
                {{$t('publicbtn.userdetails')}}
                </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
              <el-button v-if="diction =='CS_V2'?false:diction =='CS'?false:diction =='Counter'?false:true"
                size="mini"
                type="primary"
                @click="userResource(props.row.id, props.row.capitalDeclaration)">
                {{$t('publicbtn.sourceoffunds')}}
              </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
              <el-button v-if="diction=='Compliance'?true:diction=='Admin'?true:false"
                size="mini"
                type="primary"
                @click="delectUser(props.row.username)">     
                {{$t('publicbtn.deleteaccount')}}
              </el-button>
          </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
          <!-- <el-button
            size="mini" v-if="diction =='CS_V2'?false:diction =='Counter'?false:true"
            @click="updataUserStatus(props.row.id, props.row.status)"
          >
            {{$t('publicbtn.updatestatus')}}
          </el-button>

          <el-button v-if="diction =='Counter'?false:true"
            size="mini"
            type="primary"
            @click="userUpDateMsg(props.row)"
          >
          {{$t('publicbtn.modifyinformation')}}
          </el-button>

          <el-button size="mini" type="primary" @click="userDetails(props.row)">
           {{$t('publicbtn.userdetails')}}
          </el-button>

          <el-button v-if="diction =='CS_V2'?false:diction =='CS'?false:diction =='Counter'?false:true"
            size="mini"
            type="primary"
            @click="userResource(props.row.id, props.row.capitalDeclaration)"
          >
            {{$t('publicbtn.sourceoffunds')}}
          </el-button>
 
          <el-button v-if="diction=='Compliance'?true:diction=='Admin'?true:false"
            size="mini"
            type="primary"
            @click="delectUser(props.row.username)"
          >      {{$t('publicbtn.deleteaccount')}}

          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!--分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="userlistTotal"
        :page-size="userListMsg.size"
        @current-change="current_changes"
        :current-page="userListMsg.page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

import exportData from "@/components/export.js";
import regularterms from '@/common/js/userlist.js'
import excelexport from "@/components/export.vue";
import selectexcelexport from "@/components/selectexport.vue";

import lrz from "lrz";
import {
  getUserOpenDict,
  getUserRequest,
  getUserListMessageImg,
  postUserRequest,
} from "@/api/api";
export default {
  components: {
    excelexport,
    selectexcelexport

  },



  data() {
    return {
      
// 导出全部数据
      exportUserlistShow:{
        show:false,
        start:null,
        end:null,
        status:0,
        uid:null
      },
      // 导出选择数据
      exportUserlistSelectShow:{
        show:false,
        start:null,
        end:null,
        status:0,
        uid:null
      },
      exportall:false,
      selectOption:[],
      selectOptionData:[],
      selectNum :0,
      titleName:this.$t('export.selecTobereviewedName'),

      dialogVisible: false,
      uploadData: { image: null },
      million: 100000000,
      listPackLoading: true,
      listLoading: true,
      userList: [],
      userListPackage: [],
      userListPackageOtc: [],
      srcList1:[],
      srcList2:[],
      srcList3:[],
      srcList4:[],
      srcList5:[],
      userlistTotal: null,
      userListMsg: {
        uid: "",
        page: 1,
        size: 10,
        status: 0,
      },
      userStatus: {
        id: "",
        status: ""
      },
      upuserStatus: false,
      selectUserDetaile: false,
      userUpDateMessage: false,
      userListkey_zh: {},
      userListkeySelect_zh: {},
      userUpDateMessageall: {},
      userUpDateMessagealllock:{},
      diction:null,
      userDetailsMsg: {},
      userMessage: "first",
      areaCode: [],
      userUpResource: false,
      userUpResourceData: {
        id: "",
        cd: "",
        source:''
      },
      checkedspecial:false,
    };
  },
  
  computed:{
      options:function(){
        return [
        {
          value: 1,
          label:  this.$t('userlist.optionsoptions'),
        },
        {
          value: 0,
          label: this.$t('userlist.optionsUnderreview'),
        },
        {
          value: -1,
          label:  this.$t('userlist.optionsauditfailed'),
        },
        {
          value: -2,
          label: this.$t('userlist.optionsnotsubmittedyet'),
        },
            {
          value: 4,
          label: this.$t('userlist.Cancelopening'),
        },
      ]
      },
   optionsSelect:function(){
     return [
        {
          value: 0,
          label: this.$t('userlist.underreview'),
        }
         ]
      },
    
       professionalselect:function(){
         return [
        {
          value: -1,
          label: this.$t('userlist.professionalselectnotselected'),
        },
          {
          value: 0,
          label: this.$t('field.professionalselectno'),
        },
          {
          value: 1,
          label: this.$t('field.professionalselectyes'),
        }
      ]
      },

      // 必填字段
      // rules:function(){
      // return regularterms
      // },
     tableData:function(){
     return [[  
      this.$t('userlist.tsuser'),
      this.$t('userlist.recommenderid'),
      this.$t('field.userid'),
      this.$t('field.testaccount'),

      this.$t('field.upusername'),
      this.$t('field.username'),  
      this.$t('field.sex'),  
      this.$t('field.nationality'), 
      this.$t('field.phones'),  
      this.$t('userlisttab.email'), 
      this.$t('userlist.updidyouhearaboutus'),
      this.$t('Login.language'),
      this.$t('userlisttab.openingdate'), 
      this.$t('userlisttab.Sourceoffunds'),
      this.$t('userlisttab.auditstatus'),
      this.$t('userlisttab.openingprogress'),
      this.$t('userlisttab.source'),
      this.$t('field.remarks'),
  ]]
   }


  },
  methods: {
      
      
    getUserListKey() {
      let params_zh = {
        language: "zh",
      };
      let sesskey;
      // zh
      getUserOpenDict(params_zh, "/getOpenDict").then((res) => {
        if (res.status == 200) {
          let keyList = res.data;
          for (let i = 0; i < keyList.length; i++) {
            if (keyList[i]["name"] == "area_code") {
              this.areaCode = keyList[i]["dictList"];
              sessionStorage.setItem(
                "areaCode_zh",
                JSON.stringify(this.areaCode)
              );
            }
            let listkey = keyList[i].name;
            this.userListkeySelect_zh[listkey] = [];

            for (let j = 0; j < keyList[i].dictList.length; j++) {
              let obj = {
                value: keyList[i].dictList[j].value,
                label: keyList[i].dictList[j].name,
              };
              this.userListkeySelect_zh[keyList[i].name].push(obj);
              let key = keyList[i].dictList[j].value;
              this.userListkey_zh[key] = keyList[i].dictList[j].name;
            }
          }
          let seeekeySelect = this.userListkeySelect_zh;
          sessionStorage.setItem(
            "userListSelect_zh",
            JSON.stringify(seeekeySelect)
          );
          sesskey = this.userListkey_zh;
          sessionStorage.setItem("userListkey_zh", JSON.stringify(sesskey));
        } else {
          this.$message({
            message: data.message,
            type: "error",
          });
        }
        this.getUserListAll();
      });
    },
    // 获取用户前部列表信息
    getUserListAll() {
        this.listLoading = true;
      getUserRequest(this.userListMsg, "/getVerificationList").then((res) => {
        var data = res.data;
        if (data.code == 200) {
          this.userlistTotal = data.data.total;
          this.userList = data.data.list;
           for(let s = 0;s<this.userList.length;s++){
             if(this.userList[s].sourceOfFunds){
              let so =(this.userList[s].sourceOfFunds).indexOf("|")
              if(so>=0){
                let sourceOfFundsArray = this.userList[s].sourceOfFunds.split("|");
                var string = '' 
                for(let f=0;f<sourceOfFundsArray.length;f++){
                  string += this.userListkey_zh[sourceOfFundsArray[f]] + '，'
                }
                string = string.substr(0, string.length - 1);
                this.userList[s].sourceOfFunds =string
              }
              
           }
           }
        } else {
          this.$message({
            message: data.message,
            type: "error",
          });
        }
        this.listLoading = false;
      });
    },
        // 打开用户详情判断
    openjudgedetaile(field){
      if(this.userDetailsMsg[field] == 0){
          this.userDetailsMsg[field]= false;
          }else if(this.userDetailsMsg[field] == 1){
            this.userDetailsMsg[field]= true;
          }
    },
    // 查看用户详情
    userDetails(details) {
      this.srcList1=[]
      this.srcList2=[]
      this.srcList3=[]
      this.srcList4=[]
      this.srcList5=[]
      this.srcList1.push(details.picIdCardFront)
      this.srcList2.push(details.picIdCardBack)
      this.srcList3.push(details.picAddress)
      this.srcList4.push(details.holdPic)
      this.srcList5.push(details.picCard)
      var detailsPar = JSON.parse(JSON.stringify(details));
      this.userDetailsMsg = detailsPar;

      this.openjudgedetaile('locking');
      this.openjudgedetaile('rechargeAble');
      this.openjudgedetaile('withdrawAble');
      this.openjudgedetaile('exchangeAble');
      this.openjudgedetaile('withdrawInnerAble');
      
      if (detailsPar.capitalDeclaration) {
        this.userDetailsMsg.capitalDeclaration = Number(
          detailsPar.capitalDeclaration
        ).toLocaleString();
      }

   
      let params = {
        uid: details.username,
        type: 1,
      };
      let paramsEtc = {
        uid: details.username,
        type: 2,
      };

      this.getUserList(params, paramsEtc);
      this.selectUserDetaile = true;
    },
    // 客户资料 钱包 文件
    getUserList(params, paramsEtc) {
      getUserRequest(params, "/getUserTradeWallet").then((res) => {
        let data = res.data;
        if (data.code == 200) {
          this.userListPackage = data.data;
        }
        this.listPackLoading = false;
      });

      // OTC钱包
      getUserRequest(paramsEtc, "/getUserTradeWallet").then((res) => {
        let data = res.data;
        if (data.code == 200) {
          this.userListPackageOtc = data.data;
        }
        this.listPackLoading = false;
      });
    },
    // 资源申报
    userResource(id, cd) {
      this.userUpResourceData.id = id;
      this.userUpResourceData.cd = cd;
      this.userUpResource = true;
    },

    userResourceSubmit() {
      postUserRequest(
        this.userUpResourceData,
        "/updateCapitalDeclaration"
      ).then((res) => {
        var data = res.data;
        if (data.code == 200) {
          this.getUserListAll();
          this.userUpResource = false;
          this.$message({
            type: "success",
            message: data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: data.message,
          });
        }

      });
    },

    userResourceReset() {
      this.userUpResource = false;
    },
    // 删除账号
    delectUser(username) {
      this.$prompt(this.$t('bulletframe.deleteTips'), this.$t('bulletframe.Tips'), {
        confirmButtonText: this.$t('publicbtn.determine'),
        cancelButtonText:  this.$t('publicbtn.cancel'),
        inputType: "password",
        inputPlaceholder: this.$t('Login.password'),
        inputPattern: /\S/,
        inputErrorMessage: this.$t('Login.passwordempty'),
      })
        .then(({ value }) => {
          let delectusername = {
            username: username,
            pwd: this.$md5(value),
          };
          getUserRequest(delectusername, "/delAccount").then((res) => {
            var data = res.data;
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: data.message,
              });
            } else {
              this.$message({
                type: "error",
                message: data.message,
              });
            }
            this.getUserListAll();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: data.message,
          });
        });
    },
    // 4tab
    handleClick(tab) {
      this.userMessage = tab.name;
    },

    // 关闭用户详情
    userDetailClose() {
      this.selectUserDetaile = false;
      this.userMessage = "first";
    },

    // 修改用户状态
    updataUserStatus(id, status) {
      this.upuserStatus = true;
      this.userStatus.id = id;
      this.userStatus.status = status;
    },

    // 修改状态提交
    getUserStatusSubmit() {
      var userStatusMsg = this.userStatus
      
      postUserRequest(userStatusMsg, "/updateVerificationStatus").then(
        (res) => {
          var data = res.data;
          if (data.code == 200) {
            this.getUserListAll();
            this.$message({
              message: data.message,
               type: "success",
            });
          } else {
            this.$message({
              message: data.message,
              type: "error",
            });
          }
          this.upuserStatus = false;
        }
      );
    },
    resetGetUserStatus() {
      this.upuserStatus = false;
    },

// 打开修改信息判断
    openjudgefield(field){
      if(this.userUpDateMessageall[field] == 0){
          this.userUpDateMessageall[field]= false;
          }else if(this.userUpDateMessageall[field] == 1){
            this.userUpDateMessageall[field]= true;
          }
    },

    // 提交修改信息判断
    submitjudgefield(field){
      if(this.userUpDateMessagealllock[field]){
            this.userUpDateMessagealllock[field] = 1;
          }else{
            this.userUpDateMessagealllock[field] = 0;
          }
    },
    // 修改用户全部信息弹框
    userUpDateMsg(userMessage) {
      this.userUpDateMessage = true;
      this.userUpDateMessageall = JSON.parse(JSON.stringify(userMessage));
      this.openjudgefield('locking');
      this.openjudgefield('rechargeAble');
      this.openjudgefield('withdrawAble');
      this.openjudgefield('exchangeAble');
      this.openjudgefield('withdrawInnerAble');
    },
    // 提交用户全部信息
    userUpDateMessageSubmit() {
     this.userUpDateMessagealllock = JSON.parse(JSON.stringify(this.userUpDateMessageall));
      this.submitjudgefield('locking');
      this.submitjudgefield('rechargeAble');
      this.submitjudgefield('withdrawAble');
      this.submitjudgefield('exchangeAble');
      this.submitjudgefield('withdrawInnerAble');
      this.$refs.userUpDateMessagefrom.validate((valid) => {
        if (valid) {
          postUserRequest(
            this.userUpDateMessagealllock,
            "/updateVerification"
          ).then((res) => {
            var data = res.data;
            if (data.code == 200) {
              this.getUserListAll();
              this.$message({
                message: data.message,
                 type: "success",
              });
            } else {
              this.$message({
                message: data.message,
                type: "error",
              });
            }
            this.userUpDateMessage = false;
          });
    
        }
      });
  


      
    },
    userUpDateMessageReset() {
      this.userUpDateMessage = false;
    },

    // 查询用户
    userStatusSelect() {
      this.userListMsg.page= 1
      this.getUserListAll();
    },
    // 刷新
    userStatusRefresh() {
      this.userListMsg.page = 1;
      this.getUserListAll();
    },
    // 分页
    current_changes(pager) {
      this.userListMsg.page = pager;
      this.getUserListAll();
    },
    //上传
    tirggerFile(event, userTypeImg) {
      let _this = this;
      var file = event.target.files[0];
      if (file.size / 1024 / 1024 > 5) {
        this.$message({
          message: this.$t('bulletframe.lessthan5m'),
          type: "error",
        });
        return;
      }
      if (file.type.indexOf("image") == -1) {
        this.$message({
          message: this.$t('bulletframe.fileformat'),
          type: "error",
        });
        return;
      }
      //创建文件读取相关的变量
      var imgFile;
      var reader = new FileReader();
      //为文件读取成功设置事件
      reader.onload = function (e) {
        imgFile = e.target.result;
        var data = { bas64: imgFile };
        getUserListMessageImg(data, "/uploadBas64Image").then((res) => {
          if (res.data.code == 200) {
            switch (userTypeImg) {
              case "picIdCardFront":
                _this.userUpDateMessageall.picIdCardFront = res.data.data;
                break;
              case "picIdCardBack":
                _this.userUpDateMessageall.picIdCardBack = res.data.data;
                break;
              case "holdPic":
                _this.userUpDateMessageall.holdPic = res.data.data;
                break;
              case "picAddress":
                _this.userUpDateMessageall.picAddress = res.data.data;
                break;
              case "picCard":
                _this.userUpDateMessageall.picCard = res.data.data;
                break;
            }
          } else {
            this.$message({
              message:res.data.message,
              type: "error",
            });
          }
        });
      };
      lrz(file, {
        quality: 1, // 图片压缩质量，取值0-1，默认为0.7
        filedName: "", // 后端接收的字段名，默认为 'file'
      })
        .then((rst) => {
          //正式读取文件
          reader.readAsDataURL(rst.file);
        })
        .catch(function (err) {
          // 处理失败会执行
        })
        .always(function () {
          // 不管是成功失败，都会执行
        });
    },

    // 导出全部数据
    exportexcel(){
      this.exportUserlistShow.show=true
    },
    
    exportUserlistSubmit(){
        if(this.exportUserlistShow.end && this.exportUserlistShow.start){
              if(Number(this.exportUserlistShow.end) >= Number(this.exportUserlistShow.start)){
                if(Number(this.exportUserlistShow.end) - Number(this.exportUserlistShow.start) <=9){
              let status = this.exportUserlistShow.status,
                  size = null,
                  page = this.exportUserlistShow.start;
              if(this.exportUserlistShow.end == this.exportUserlistShow.start){
                  size = 10
              } else{
                  size =  (Number(this.exportUserlistShow.end) - Number(this.exportUserlistShow.start) +1)*10
              }
              let exportDatas={size:size,page: page,status:status,uid:this.userListMsg.uid}
              getUserRequest(exportDatas, "/getVerificationList").then((res) => {
                if(res.data.code==200){
                  let data = res.data ,
                  datalist = data.data.list

     let tableDatatilte = [
                     'special',
                     'referral',
                     'userId',
                     'test',
                     'username',
                     'name', 
                     'gender',
                     'nationality',
                     'username',
                     'phone',
                     'hearAboutUs',
                     'lan',
                     'register',
                     'sourceOfFunds',
                     'status', 
                     'step',
                     'origin',
                     'remark',
                     ]
                     // let tableData=[[      '用户ID','用户名称','姓名',  '性别',   '国籍',       '职业',      '邮箱',  '语言','年收入',      '开户日期',  '专业资格',                  '资金来源',      '审核状态','开户进度','总资产',       '电邮',    '加密货币经验',     '来源']]
                    let tableData = this.tableData

                        for(let i = 0;i<datalist.length;i++){
                          if(datalist[i].sourceOfFunds){
                            let so =(datalist[i].sourceOfFunds).indexOf("|")
                            if(so>=0){
                              let sourceOfFundsArray = datalist[i].sourceOfFunds.split("|");
                              var string = '' 
                              for(let f=0;f<sourceOfFundsArray.length;f++){
                                string += this.userListkey_zh[sourceOfFundsArray[f]] + '，'
                              }
                              string = string.substr(0, string.length - 1);
                              datalist[i].sourceOfFunds =string
                            }
                         }
                        datalist[i]['platform'] = datalist[i]['platform'].toUpperCase()

                      if(datalist[i]['special']==0){
                          datalist[i]['special'] = this.$t('tradewallet.notselected')
                        }else if(datalist[i]['special'] ==1){
                          datalist[i]['special'] = this.$t('userlist.special')
                        }else if(datalist[i]['special'] ==2){
                          datalist[i]['special'] = this.$t('userlist.online')
                        }else if(datalist[i]['special'] ==3){
                          datalist[i]['special'] = this.$t('userlist.offline')
                        }


                        if(datalist[i]['gender'] ==1){
                        datalist[i]['gender'] = this.$t('field.male')
                        }else {
                        datalist[i]['gender'] = this.$t('field.female')
                        }

                        datalist[i]['nationality'] = this.userListkey_zh[datalist[i]['nationality']]==undefined?datalist[i]['nationality']:this.userListkey_zh[datalist[i]['nationality']]
                        datalist[i]['occupation'] = this.userListkey_zh[datalist[i]['occupation']]==undefined?datalist[i]['occupation']:this.userListkey_zh[datalist[i]['occupation']]

                          if(datalist[i]['test'] == 1){
                        datalist[i]['test'] = this.$t('field.yes')
                        }else if(datalist[i]['test'] == 0) {
                        datalist[i]['test'] = this.$t('field.no')
                        }

                        if(datalist[i]['lan'] == 0){
                        datalist[i]['lan'] = this.$t('field.notselected')
                        }else if(datalist[i]['lan'] == 1) {
                        datalist[i]['lan'] = this.$t('field.simplifiedchinese')
                        }else if(datalist[i]['lan'] == 2) {
                        datalist[i]['lan'] = this.$t('field.chinesetraditional')
                        }else if(datalist[i]['lan'] ==3) {
                        datalist[i]['lan'] = this.$t('field.english')
                        }
                        datalist[i]['annualIncome'] = this.userListkey_zh[datalist[i]['annualIncome']] ==undefined?datalist[i]['annualIncome']:this.userListkey_zh[datalist[i]['annualIncome']]
                        datalist[i]['professionalQualifications'] = this.userListkey_zh[datalist[i]['professionalQualifications']] ==undefined?datalist[i]['professionalQualifications']:this.userListkey_zh[datalist[i]['professionalQualifications']]
                     
                     
                        if(datalist[i]['status'] == 0){
                          datalist[i]['status'] = this.$t('userlisttab.tionsUnderreview')
                        }else if(datalist[i]['status'] == 1) {
                        datalist[i]['status'] = this.$t('userlisttab.tionsoptions')
                        }else if(datalist[i]['status'] == -1) {
                        datalist[i]['status'] = this.$t('userlisttab.tionsauditfailed')
                        }else if(datalist[i]['status'] == -2) {
                        datalist[i]['status'] = this.$t('userlisttab.tionsnotsubmittedyet')
                        }
                      datalist[i]['step'] = this.$t('userlisttab.third')+ datalist[i]['step']+this.$t('userlisttab.step')
                      datalist[i]['totalNetWorth'] = this.userListkey_zh[datalist[i]['totalNetWorth']]==undefined?datalist[i]['totalNetWorth']:this.userListkey_zh[datalist[i]['totalNetWorth']]
                      datalist[i]['yearsExperience'] = this.userListkey_zh[datalist[i]['yearsExperience']]
                      datalist[i]['hearAboutUs'] = this.userListkey_zh[datalist[i]['hearAboutUs']]==undefined?datalist[i]['hearAboutUs']:this.userListkey_zh[datalist[i]['hearAboutUs']]
                    }

                  let exportName = this.$t('export.tobereviewed')
                    exportData.exportTable(datalist,tableData,tableDatatilte,exportName)
                }else{
                      this.$message({
                      message:data.message,
                      type: "error",
                    });
                }
              this.exportUserlistShow.show=false
             })
                  }else{
                    this.$message({
                      message:this.$t('bulletframe.largerpages'),
                      type: "error",
                    });
                }

              }else{
                  this.$message({
                    message:this.$t('bulletframe.startpage'),
                    type: "error",
                  });
              }
        }else{
        this.$message({
          message:this.$t('bulletframe.ofpages'),
          type: "error",
        });
      }

    },
    exportUserlistReset(){
      this.exportUserlistShow.end ='';
      this.exportUserlistShow.start=''
      this.exportUserlistShow.show=false
    },
        //选择导出
    selectexportexcel(){
      this.exportUserlistSelectShow.show=true
this.selectOption =[


   {
    label:this.$t('field.userid'),
    value:'userId',
    checked: false,
  },
  {
    label:this.$t('field.username'),
    value:'name',
    checked: false,
  },

   {
    label:this.$t('field.sex'),
    value:'gender',
    checked: false,
  }, 
  {
    label:this.$t('field.testaccount'),
    value:'test',
    checked: false,
  }, 
  
  {
    label:this.$t('userlist.upNumber'),
    value:'idNo',
    checked: false,
  },
   {
    label:this.$t('userlist.upMailbox'),
    value:'phone',
    checked: false,
  },
   {
    label:this.$t('userlist.upaddress'),
    value:'address',
    checked: false,
  },

   {
    label:this.$t('userlist.upbirthday'),
    value:'birthday',
    checked: false,
  },
   {
    label:this.$t('userlist.upemployer'),
    value:'company',
    checked: false,
  },
   {
    label:this.$t('userlist.upsomeoneelsecontrolsyouraccount'),
    value:'controlAccount',
    checked: false,
  },
   {
    label:this.$t('userlist.Creationtime'),
    value:'register',
    checked: false,
  },
  {
    label:this.$t('userlist.uprecommenderid'),
    value:'referral',
    checked: false,
  },
   {
    label:this.$t('userlist.upnologin'),
    value:'locking',
    checked: false,
  },
   {
    label:this.$t('userlist.upborecharging'),
    value:'rechargeAble',
    checked: false,
  },
   {
    label:this.$t('userlist.upnowithdrawal'),
    value:'withdrawAble',
    checked: false,
  },
   {
    label:this.$t('userlist.upcapitaldeclaration'),
    value:'capitalDeclaration',
    checked: false,
  },
   {
    label:this.$t('userlist.qualifications'),
    value:'professionalQualifications',
    checked: false,
  },
   {
    label:this.$t('userlist.uppurposeofaccountopening'),
    value:'totalNetWorth',
    checked: false,
  },
   {
    label:this.$t('userlist.updatetime'),
    value:'userUpDateMessageall',
    checked: false,
  },

   {
    label:this.$t('field.upusername'),
    value:'username',
    checked: false,
  },
   {
    label:this.$t('userlist.upSourceoffunds'),
    value:'sourceOfFunds',
    checked: false,
  },  
     {
    label:this.$t('userlist.uptolerance'),
    value:'tolerance',
    checked: false,
  },    {
    label:this.$t('userlist.uptreatment'),
    value:'fluctuation',
    checked: false,
  },    {
    label:this.$t('userlist.totalassets'),
    value:'totalNetWorth',
    checked: false,
  },    {
    label:this.$t('userlisttab.annualincome'),
    value:'annualIncome',
    checked: false,
  },    {
    label:this.$t('field.country'),
    value:'country',
    checked: false,
  },    {
    label:this.$t('userlist.upituation'),
    value:'employmentStatus',
    checked: false,
  },    {
    label:this.$t('userlist.upnoexchange'),
    value:'exchangeAble',
    checked: false,
  },    {
    label:this.$t('userlist.upincludingintroversion'),
    value:'withdrawInnerAble',
    checked: false,
  },    {
    label:this.$t('userlist.upinvestmentgoalofcryptocurrency'),
    value:'bestDescribes',
    checked: false,
  }, 
  {
    label:this.$t('userlist.upinvestmenttime'),
    value:'averageInvestment',
    checked: false,
  }, {
    label:this.$t('userlist.upafteroneyear'),
    value:'expectOfYear',
    checked: false,
  }, {
    label:this.$t('userlist.updidyouhearaboutus'),
    value:'hearAboutUs',
    checked: false,
  }, {
    label:this.$t('userlist.upthecognitionofcryptocurrency'),
    value:'knowledgeCrypto',
    checked: false,
  }, {
    label:this.$t('userlist.upexperienceofinvestingincryptocurrency'),
    value:'yearsExperience',
    checked: false,
  }, {
    label:this.$t('userlist.upoftotalassets'),
    value:'percentage',
    checked: false,
  }, {
    label:this.$t('field.language'),
    value:'lan',
    checked: false,
  }, {
    label:this.$t('field.nationality'),
    value:'nationality',
    checked: false,
  }, {
    label:this.$t('userlist.upoccupation'),
    value:'occupation',
    checked: false,
  },  {
    label:this.$t('userlist.job'),
    value:'job',
    checked: false,
  }, {
    label:'pep',
    value:'pep',
    checked: false,
  }, {
    label:this.$t('userlist.upinpublicservice'),
    value:'politicallyExposed',
    checked: false,
  }, {
    label:this.$t('userlist.upcustomersource'),
    value:'origin',
    checked: false,
  }, {
    label:this.$t('userlist.tsuser'),
    value:'special',
    checked: false,
  }, {
    label:this.$t('field.remarks'),
    value:'remark',
    checked: false,
  },
]
    },
    changeall(){
      if(this.exportall){
        this.selectOption.map((itme)=>{
          itme.checked = true
            })
            this.selectNum = 45
      }else{
          this.selectOption.map((itme)=>{
          itme.checked = false
            })
            this.selectNum = 0

      }
    },  
    changeSelect(checked){
      if(checked){
          this.selectNum = this.selectNum +1
        if(this.selectNum ==45)    {
          this.exportall = true
        }
      }else{
       this.selectNum = this.selectNum -1
        this.exportall = false
      }
    },
    // 子组件确定导出
    changeOpetion(value){
        if(this.exportUserlistSelectShow.end && this.exportUserlistSelectShow.start){
              if(Number(this.exportUserlistSelectShow.end) >= Number(this.exportUserlistSelectShow.start)){
                if(Number(this.exportUserlistSelectShow.end) - Number(this.exportUserlistSelectShow.start) <=9){
              let status = this.exportUserlistSelectShow.status,
                  size = null,
                  page = this.exportUserlistSelectShow.start;
              if(this.exportUserlistSelectShow.end == this.exportUserlistSelectShow.start){
                  size = 10
              } else{
                  size =  (Number(this.exportUserlistSelectShow.end) - Number(this.exportUserlistSelectShow.start) +1)*10
              }
              let exportDatas={size:size,page: page,status:status,uid:this.userListMsg.uid}
              getUserRequest(exportDatas, "/getVerificationList").then((res) => {
                if(res.data.code==200){
                  let data = res.data ,
                  datalist = data.data.list
                        for(let i = 0;i<datalist.length;i++){
                          if(datalist[i].sourceOfFunds){
                            let so =(datalist[i].sourceOfFunds).indexOf("|")
                            if(so>=0){
                              let sourceOfFundsArray = datalist[i].sourceOfFunds.split("|");
                              var string = '' 
                              for(let f=0;f<sourceOfFundsArray.length;f++){
                                string += this.userListkey_zh[sourceOfFundsArray[f]] + '，'
                              }
                              string = string.substr(0, string.length - 1);
                              datalist[i].sourceOfFunds =string
                            }
                        }
                        datalist[i]['locking'] = datalist[i]['locking'] == 1?this.$t('field.yes'):datalist[i]['locking'] == 0?this.$t('field.no'):''
                        datalist[i]['rechargeAble'] = datalist[i]['rechargeAble'] == 1?this.$t('field.yes'):datalist[i]['rechargeAble'] == 0?this.$t('field.no'):''
                        datalist[i]['withdrawAble'] = datalist[i]['withdrawAble'] == 1?this.$t('field.yes'):datalist[i]['withdrawAble'] == 0?this.$t('field.no'):''
                        datalist[i]['exchangeAble'] = datalist[i]['exchangeAble'] == 1?this.$t('field.yes'):datalist[i]['exchangeAble'] == 0?this.$t('field.no'):''
                        datalist[i]['withdrawInnerAble'] = datalist[i]['withdrawInnerAble'] == 1?this.$t('field.yes'):datalist[i]['withdrawInnerAble'] == 0?this.$t('field.no'):''



                        datalist[i]['gender'] = datalist[i]['gender'] ==1?this.$t('field.male'):datalist[i]['gender'] ==0?this.$t('field.female'):''
                        datalist[i]['test'] = datalist[i]['test'] == 1?this.$t('field.yes'):datalist[i]['test'] == 0?this.$t('field.no'):''
                        datalist[i]['controlAccount'] = datalist[i]['controlAccount'] == 1?this.$t('field.yes'):datalist[i]['controlAccount'] == 0?this.$t('field.no'):''
                        datalist[i]['purpose'] = this.userListkey_zh[datalist[i]['purpose']]
                        datalist[i]['tolerance'] = this.userListkey_zh[datalist[i]['tolerance']]
                        datalist[i]['fluctuation'] = this.userListkey_zh[datalist[i]['fluctuation']]
                        datalist[i]['totalNetWorth'] = this.userListkey_zh[datalist[i]['totalNetWorth']]
                        datalist[i]['annualIncome'] = this.userListkey_zh[datalist[i]['annualIncome']]
                        datalist[i]['country'] = this.userListkey_zh[datalist[i]['country']]
                        datalist[i]['employmentStatus'] = this.userListkey_zh[datalist[i]['employmentStatus']]
                        datalist[i]['bestDescribes'] = this.userListkey_zh[datalist[i]['bestDescribes']]
                        datalist[i]['averageInvestment'] = this.userListkey_zh[datalist[i]['averageInvestment']]
                        datalist[i]['expectOfYear'] = this.userListkey_zh[datalist[i]['expectOfYear']]
                        datalist[i]['hearAboutUs'] = this.userListkey_zh[datalist[i]['hearAboutUs']]
                        datalist[i]['knowledgeCrypto'] = this.userListkey_zh[datalist[i]['knowledgeCrypto']]
                        datalist[i]['yearsExperience'] = this.userListkey_zh[datalist[i]['yearsExperience']]
                        datalist[i]['percentage'] = this.userListkey_zh[datalist[i]['percentage']]
                        datalist[i]['occupation'] = this.userListkey_zh[datalist[i]['occupation']]
                        if(datalist[i]['lan'] == 0){
                        datalist[i]['lan'] = this.$t('field.notselected')
                        }else if(datalist[i]['lan'] == 1) {
                        datalist[i]['lan'] = this.$t('field.simplifiedchinese')
                        }else if(datalist[i]['lan'] == 2) {
                        datalist[i]['lan'] = this.$t('field.chinesetraditional')
                        }else if(datalist[i]['lan'] ==3) {
                        datalist[i]['lan'] = this.$t('field.english')
                        }
                        datalist[i]['pep'] = this.userListkey_zh[datalist[i]['pep']]

                        datalist[i]['platform'] = datalist[i]['platform'].toUpperCase()
                        if(datalist[i]['special']==0){
                          datalist[i]['special'] = this.$t('tradewallet.notselected')
                        }else if(datalist[i]['special'] ==1){
                          datalist[i]['special'] = this.$t('userlist.special')
                        }else if(datalist[i]['special'] ==2){
                          datalist[i]['special'] = this.$t('userlist.online')
                        }else if(datalist[i]['special'] ==3){
                          datalist[i]['special'] = this.$t('userlist.offline')
                        }
                        if(datalist[i]['gender'] ==1){
                        datalist[i]['gender'] = this.$t('field.male')
                        }else {
                        datalist[i]['gender'] = this.$t('field.female')
                        }
                        datalist[i]['nationality'] = this.userListkey_zh[datalist[i]['nationality']]==undefined?datalist[i]['nationality']:this.userListkey_zh[datalist[i]['nationality']]
                        datalist[i]['occupation'] = this.userListkey_zh[datalist[i]['occupation']]==undefined?datalist[i]['occupation']:this.userListkey_zh[datalist[i]['occupation']]
                        datalist[i]['annualIncome'] = this.userListkey_zh[datalist[i]['annualIncome']] ==undefined?datalist[i]['annualIncome']:this.userListkey_zh[datalist[i]['annualIncome']]
                        datalist[i]['professionalQualifications'] = this.userListkey_zh[datalist[i]['professionalQualifications']] ==undefined?datalist[i]['professionalQualifications']:this.userListkey_zh[datalist[i]['professionalQualifications']]
                        if(datalist[i]['status'] == 0) {
                        datalist[i]['status'] = this.$t('userlisttab.tionsUnderreview')
                        }else if(datalist[i]['status'] == 1) {
                        datalist[i]['status'] = this.$t('userlisttab.tionsoptions')
                        }else if(datalist[i]['status'] == -1) {
                        datalist[i]['status'] = this.$t('userlisttab.tionsauditfailed')
                        }else if(datalist[i]['status'] == -2) {
                        datalist[i]['status'] = this.$t('userlisttab.tionsnotsubmittedyet')
                        }
                      }

                   this.selectOptionData = datalist
                 this.exportall = false
                  this.exportUserlistSelectShow.show=false
                  this.exportUserlistSelectShow.end=''
                  this.selectNum = 0
                  this.exportUserlistSelectShow.start=''
                }else{
                      this.$message({
                      message:data.message,
                      type: "error",
                    });
                }

                

             })
                  }else{
                    this.$message({
                      message:this.$t('bulletframe.largerpages'),
                      type: "error",
                    });
                }

              }else{
                  this.$message({
                    message:this.$t('bulletframe.startpage'),
                    type: "error",
                  });
              }
        }else{
        this.$message({
          message:this.$t('bulletframe.ofpages'),
          type: "error",
        });
      }
    },
    changeOpetionClose(value){
       this.exportall = false
      this.exportUserlistSelectShow.show= value
      this.exportUserlistSelectShow.end=''
      this.selectNum = 0
      this.exportUserlistSelectShow.start=''
    }
  },
   
  mounted() {},
  created() {
    this.diction = sessionStorage.getItem("bospower");
    let judgekey = sessionStorage.getItem("userListkey_zh");
    let jubgeselect = sessionStorage.getItem("userListSelect_zh");
    if (!judgekey && !jubgeselect) {
      this.getUserListKey();
    } else {
      this.userListkey_zh = JSON.parse(
        sessionStorage.getItem("userListkey_zh")
      );
      this.userListkeySelect_zh = JSON.parse(
        sessionStorage.getItem("userListSelect_zh")
      );
      // console.log(this.userListkey_zh);
      // console.log(this.userListkeySelect_zh);
      this.getUserListAll();
    }
  },
};
</script>

<style scoped>
.pagination {
  text-align: center;
  margin-top: 20px;
}

.userUpdateForm.userdetaile {

  text-align: center;
  width: 60%;
  height: 70%;
  padding: 50px;
}
.userdetails{
  text-align: center;
}
.userUpdateFormScroll{
  height: 65vh;
  overflow: auto;
}
.userUpdateMoney {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 9;
}
.userUpdateForm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  padding: 30px;
  background: #fff;
  box-shadow: 0px 0px 3px #888;
}

.userUpdateMoney h2 {
  text-align: center;
  font-size: 18px;
}
.userDetaibox,
.updateRightBottom,
.updateRightTop {
  display: flex;
  justify-content: center;
}
.userUpdateFormall {
  width: 90%;
}
.table-box /deep/.el-table th > .cell {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.demo-image__preview {
  padding: 0 30px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.demo-image__preview h3 {
  margin-top: 0;
}

.el-image {
  padding: 20px;
}
.el-table .warning-row {
    background: oldlace;
  }
    .iptcheck{
    display: flex;
  }
  .el-checkbox{
    margin-left: 30px;
    margin-bottom: 20px;
    width: 100px;
  }
    .iptcheck{
    padding: 20px;
  }
</style>
